<template>
<div class="statusMain">
    <headPor class="headpor"></headPor>
    <p class="operation" @click="dialogFormVisible = true">切换用户</p>
    <p class="operation" @click="logout">退出</p>
<el-dialog title="切换用户" :visible.sync="dialogFormVisible" :modal-append-to-body='false' width="450px">
    <el-form label-width="0px" :model="login_form" :rules="loginFromRules" ref="loginFormRef" @keyup.enter.native="login">
        <el-form-item prop="account">
          <el-input style="opacity: 0.5;" placeholder="请输入账号"
          prefix-icon="el-icon-user" v-model="login_form.account"
          />
        </el-form-item>
        <el-form-item prop="password">
            <el-input style="opacity: 0.5;"placeholder="请输入密码"
            prefix-icon="el-icon-lock" v-model="login_form.password" show-password
            />
        </el-form-item >
        <el-form-item id="btns">
            <el-button type="primary" icon="el-icon-s-check" @click="login" round>登录</el-button>
        </el-form-item>
    </el-form>
</el-dialog>
</div>
</template>

<script>
    import headPor from '@/components/status-bar/status-item/head'
    export default {
        name: 'statusMain',
        components: {
            headPor,

        },
        data() {
            return {
                login_form: {
                    account: '',
                    password: '',
                },
                //登录的表单验证规则
                loginFromRules: {
                    //验证账号
                    account: [{
                        required: true,
                        message: '请输入账号',
                        trigger: 'blur'
                    }, {
                        min: 3,
                        max: 8,
                        message: '长度在 3 到 8 个字符',
                        trigger: 'blur'
                    }],
                    //验证密码
                    password: [{
                        required: true,
                        message: '请输入密码',
                        trigger: 'blur'
                    }, {
                        min: 5,
                        max: 15,
                        message: '长度在 5 到 15 个字符',
                        trigger: 'blur'
                    }],
                },
                dialogFormVisible: false,
            }
        },
        methods: {
            //注销
            logout() {
                window.sessionStorage.clear();
                this.$router.push('login')
            },
            // 表单预验证
            login() {
                this.$refs.loginFormRef.validate(async valid => {
                    if (!valid) return;
                    //简化json文件
                    const {
                        data: res
                    } = await this.$http.post('userLogin', this.login_form)
                        // const result = this.$http.get('userLogin', this.login_form)
                        //处理状态码
                    if (res.code == -1) {
                        this.$message.error('密码错误，请重新输入');
                    } else if (res.code == 1) {
                        this.$message.success('登录成功');
                        window.sessionStorage.setItem('token', res.token)
                        this.$store.dispatch('getUserData', res.data)
                        console.log(this.$store.state.userData);
                        this.$refs.loginFormRef.resetFields();
                        this.dialogFormVisible = false
                            //调用userText方法请求接口达到切换用户
                        this.$emit('changeUser')
                    } else if (res.code == -2) {
                        this.$message.warning('用户不存在');
                    }
                })
            },
        },
    }
</script>

<style>
    .headpor {
        cursor: pointer;
    }
    
    #btns {
        display: flex;
        justify-content: flex-end;
    }
    
    .statusMain {
        display: grid;
        position: fixed;
        align-content: center;
        grid-template-columns: repeat(5, 80px);
        top: 10px;
        right: 0px;
        width: 400px;
        height: 50px;
    }
    
    .operation {
        text-align: center;
        height: 50px;
        line-height: 50px;
        /* cursor: url(https://cdn.jsdelivr.net/gh/mirai-mamori/web-img/img/Work.cur), alias; */
        cursor: pointer;
    }
    
    .operation:hover {
        background: #f0f0f5;
    }
</style>